<template>
    <div class="custom-list">        
        <ul class="list-item">
            1、<a href="https://addons.mozilla.org/zh-CN/firefox/addon/aihome%E6%96%B0%E6%A0%87%E7%AD%BE%E9%A1%B5-ai%E4%B8%8A%E7%BD%91%E5%8A%A9%E6%89%8B/"
                target="_blank" class="link">
                打开Firefox商店
            </a>
        </ul>
        <ul class="list-item">
            2、点击<span class="highlight">添加至Firefox</span>，如下图：
            <br>
            <img src="@/assets/image/firefox-1.png"
                class="step-image">
        </ul>
        <ul class="list-item">
            3、弹出确认框，点击<span class="highlight">添加扩展程序</span>，如下图：
            <br>
            <img src="@/assets/image/firefox-2.png"
                class="step-image-small">
        </ul>
        <ul class="list-item">
            4、打开<span class="highlight">2个</span>新标签页，然后在地址栏输入：<span class="highlight">about:preferences#home</span>，如下图操作即可：
            <br>
            <img src="@/assets/image/firefox-3.png"
                class="step-image">
        </ul>
       
    </div>

</template>

<style scoped>
/* 列表样式 */
.custom-list {
    display: inline-block;

}

/* 列表项样式 */
.list-item {
    margin-bottom: 1rem;    
}
/* 链接样式 */
.link {
    font-weight: bold;
    text-decoration: underline;
    color: white;
}
/* 高亮文本样式 */
.highlight {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    background-color: #60a5fa;
    padding: 5px 8px;
}

.step-image {
    margin-top: 1.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image {
        width: 900px;
    }
}

.step-image-small {
    margin-top: 1.25rem;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤小图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image-small {
        width: 400px;
    }
}
</style>